<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <script src="/static/vue/vue.js"></script>
    <script src="/static/axios/axios.js"></script>
    <%--    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>--%>
    <script src="https://unpkg.com/axios@0.21.1/dist/axios.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>图书商城</title>
</head>
<body>
<div id="app">
    <el-menu class="el-menu-demo" mode="horizontal">
        <el-menu-item index="1"><a href="/">首页</a></el-menu-item>
        <el-menu-item index="2"><a href="/goShoppingCart">购物车</a></el-menu-item>
        <el-menu-item index="3"><a href="/goUser">${user.userName} 个人中心 </a></el-menu-item>
        <c:if test="${user.id!=null}">
            <el-menu-item index="3"><a href="/logout">注销 ${user.userName}</a></el-menu-item>
        </c:if>
    </el-menu>

    <el-row :gutter="20">
        <el-col :span="4">
            <div class="grid-content bg-purple">
                &nbsp;
            </div>
        </el-col>
        <el-col :span="16">
            <div class="grid-content bg-purple">
                <div>购买成功</div>
                <div>共花费 ${data.order.totalMoney} ￥ 欢迎下次光临</div>
            </div>
        </el-col>
        <el-col :span="4">
            <div class="grid-content bg-purple">
                &nbsp;
            </div>
        </el-col>
    </el-row>


</div>
<script type="application/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: "33",
            name: "like"
        },
        methods: {
            searchGoods() {
                console.log(this.searchKey);
                current = this.current
                axios.request({
                    url: "/goods/list/" + current + "/" + this.pageSize,
                    method: "get",
                    params: {
                        "goodsName": this.searchKey,
                    }
                }).then(res => {
                    this.res = res.data
                    this.goodsList = this.res.data.records
                    this.current = this.res.data.current
                    this.pages = this.res.data.pages
                    this.size = this.res.data.size
                    this.total = this.res.data.total
                });
            },
        }
    })
</script>
<hr>
</body>
</html>